<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/angular.js"></script>
		<style>
			table, th, td {
				border: 1px solid grey;
				border-collapse: collapse;
				padding: 5px;
			}
			
			table tr:nth-child(odd) {
				background-color: #f1f1f1;
			}
			
			table tr:nth-child(even) {
				background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<p>使用 angular 显示表格是非常简单的：</p>
		<div ng-app="myApp" ng-controller="customersCtrl">
			<table>
				<tr>
					<th>序号</th>
					<th>Name</th>
					<th>Country</th>
				</tr>
				<tr ng-repeat="x in names">
					<td>{{ $index + 1 }}</td>
					<td>{{ x.Name }}</td>
					<td>{{ x.Country | uppercase }}</td>
				</tr>
			</table>
		</div>
	</body>

	<script>
		var app = angular.module('myApp', []);
		app.controller('customersCtrl', function($scope, $http) {
			//			$http.get("/try/angularjs/data/Customers_JSON.php")
			//				.then(function(result) {
			//					$scope.names = result.data.records;
			//				});
			$scope.names = [{
					Name: "Alfreds Futterkiste",
					Country: "Germany"
				},
				{
					Name: "Around the Horn",
					Country: "UK"
				},
				{
					Name: "ACentro comercial Moctezuma",
					Country: "Mexico"
				},
				{
					Name: "ABólido Comidas preparadas",
					Country: "Spain"
				}
			]

		});
	</script>

</html>